<template>
  <div class="WarehouseDetailed">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">入库明细报表</span>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-row>
          <el-col :xs="24" :lg="{span: 4, offset: 0}">
            <el-form-item label="选择时间" prop="cjsj">
              <el-date-picker
                v-model="oDate"
                @change="getTime"
                type="daterange"
                placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="产品名称" prop="cpmc">
              <el-input type="text"
                        class="input"
                        @change="query"
                        v-model="cpmc"
                        placeholder="产品名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="产品编号" prop="clbh">
              <el-input type="text"
                        class="input"
                        v-model="cpbh"
                        @change="query"
                        placeholder="产品编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="table.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="info" @click="tableExport('')">多选导出</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </s-table>
    </el-card>
  </div>
</template>
<script>
  /* eslint-disable indent,no-duplicate-case */

  import {AutoVue} from '~/plugins/Tools';
  import Config from '~/config';
  export default AutoVue({
    name: 'outOperation_c2q1heck-FEcarWms',
    head: {
      'title': '入库明细报表',
      'meta': [
        {'hid': 'description', 'name': 'description', 'content': '乐速科技平台 入库明细报表 查看入库明细报表信息'},
      ],
    },
    store: ['USER'],
    data: {
      header: {
        'Content-Disposition': 'attachment',
      },
      table: {
        column: [
          /* {
            label: '发起部门',
            prop: 'fqbm',
            minWidth: '0px',
            search: false,
          },
          {
            label: '发起人',
            prop: 'fqr',
            minWidth: '0px',
            search: true,
          },
          {
            label: '用途',
            prop: 'yt',
            minWidth: '0px',
            search: false,
          }, */
        ],
        data: [ /* {
          hpbh: '20160502',
          hpmc: '王小虎',
          sl: '1518 弄',
          xbh: '1',
        } */ ],
        key: 'id',
        tableColumn: 0,
        url: '/Instock/list',
        option: {
          cjsj_start: '',
          cjsj_end: '',
          cpbh: '',
          cpmc: '',
        },
        total: 0,
      },
      Name: '',
      time: '',
      times: '',
      cpbh: '',
      cpmc: '',
      oDate: '',
    },
    transition: 'slide-fade',
    methods: {
      async query () {
        this.table.option.cjsj_start = this.time;
        this.table.option.cjsj_end = this.times;
        this.table.option.cpbh = this.cpbh;
        this.table.option.cpmc = this.cpmc;
        this.tableWatch('table');
        this.table.option.cpmc = '';
        this.table.option.cpbh = '';
        this.table.option.cjsj_start = '';
        this.table.option.cjsj_end = '';
      },
      getTime (date) {
        let Adate = new Date(date.substring(0, 10));
        this.time = Adate.getTime();
        let Bdate = new Date(date.substr(13, 10));
        this.times = Bdate.getTime();
        this.table.option.cjsj_start = this.time;
        this.table.option.cjsj_end = this.times;
        this.tableWatch('table');
      },
      tableExport (row) {
        let tableRef = 'table';
        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          this[tableRef].multipleSelection.forEach(item => {
            ids.push(item.cpid);
          });
        }
        this.$confirm('您将导出入库明细报表数据。', '确认导出？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              let option = Object.assign({}, this['autoVue_' + tableRef]);
              await this.p({
                url: '/Instock/InstockExport',
                method: 'post',
                responseType: 'blob',
                data: {
                  cjsj_end: this.times,
                  cjsj_start: this.time,
                  ids,
                },
              });
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
    },
    mounted: async function () {
      try {
        let headdata = await this.post('/Instock/listHeader');
        let column = headdata.column;
        for (let item of column) {
          switch (item.prop) {
            case 'chanpinmingcheng':
              item.minWidth = '200px';
              break;
            case 'chanpinbianhao':
              item.minWidth = '200px';
              break;
            case 'chanpinfenlei':
              item.minWidth = '100px';
              break;
            case 'guige':
              item.minWidth = '200px';
              break;
          }
        }
        this.table.tableColumn = headdata.column;
        this.table.tableColumnAll = headdata.column;
        this.cpmc = '';
        this.cpbh = '';
        this.oDate = '';
        this.table.data = [];
        // console.log(11111111111111);
      } catch (err) {
        console.log(err);
      }
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }
  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }
  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
  .headertype {
    color:#1bab8b;
  }
</style>

<style lang="scss">
  .WarehouseDetailed{
    width: 88vw;
    float: left;
  }
</style>
